<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>任务分布情况</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/jquery-1.11.3.js"></script>
	<link type="text/css" rel="stylesheet" href="<%=path%>/resources/script/jquery/easyui/themes/default/easyui.css" />
	<link type="text/css" rel="stylesheet" href="<%=path%>/resources/script/jquery/easyui/themes/icon.css" />
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/jquery.easyui.patch.js"></script>
	<!-- 引入 ECharts 文件 -->
	<script src="<%=path %>/resources/script/echarts/echarts.js"></script>

  </head>
  
  <body>
  	<div>
  		<input type="hidden" id="taskcount_fpid" />
  		<input type="hidden" id="taskcount_tpid" />
    	<table>
   			<tr>
   				<td><input id="projects_taskcount" name="projects_taskcount" class="easyui-validatebox" style="width: 150px;" /></td>
   				<td><a id="btn_return_taskcount" href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search">返回上一页</a></td>
   			</tr>
   		</table>
    </div>
  	<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
    <div id="task_count_portal" style="width: 380px;height:380px; margin: 0 auto;"></div>
<script type="text/javascript">
	var contextPath = "<%=path%>";
	var task_count_portal;
	$(function(){
		
		$('#btn_return_taskcount').hide();
		// 基于准备好的dom，初始化echarts实例
		var taskcount_myChart = echarts.init(document.getElementById('task_count_portal'));
		task_count_portal = taskcount_myChart;
		var _click_piId;
		/*** 初始化项目库 */
		$('#projects_taskcount').combobox({
	        url:'projectIndex/projectIndexs.shtml',
	        method:'get',
	        valueField:'id',
	        textField:'name',
	        editable : false,
	        panelHeight:'auto',
	        onSelect : function (record) {
	        	var _projectIndexId = record.id;
	        	$('#taskcount_fpid').val(_projectIndexId);
	        	/*** 初始化报表 */
	        	taskcount_myChart.showLoading();
	        	$.post('bireport/taskCountData.shtml', {projectIndexId : _projectIndexId}, function(data){
	        		taskcount_myChart.hideLoading();
	        		initCharts(taskcount_myChart, data);
	        	});
	        },
	        onLoadSuccess : function () {
	        	var data = $('#projects_taskcount').combobox('getData');
	        	if (data.length > 0) {
					$('#projects_taskcount').combobox('select', data[0].id);
				}
	        }
        });
        
        $('#btn_return_taskcount').click(function(){
      		var r_pid = $('#taskcount_tpid').val();
      		if (null != r_pid && '' != r_pid) {
      			task_count_portal.showLoading();
		    	$.post('bireport/taskCountData.shtml', {projectIndexId : r_pid}, function(data){
		       		task_count_portal.hideLoading();
		       		initCharts(task_count_portal, data);
		       	});	
      		}
        });
	});
	
	function initCharts(taskcount_myChart, data){
		var _title ='任务分布图';
		var dataObj = data.data.data;
		var _projectIndexs = new Array();
		var _data = new Array();
		var _leaf = data.data.leaf;
		var _parent_piId = data.data.ppiId;
		$('#taskcount_tpid').val(_parent_piId);
		//initDataList(data.data.piId, data.data.name);
		if (null == _parent_piId || '' == _parent_piId) {
			$('#btn_return_taskcount').hide();
		}
		for (var i=0; i<dataObj.length; i++) {
			_projectIndexs.push(dataObj[i].name);
			var obj = {};
			obj['name'] = dataObj[i].name;
			obj['value'] = dataObj[i].value;
			obj['piId'] = dataObj[i].piId;
			obj['leaf'] = dataObj[i].leaf;
			obj['ppiId'] = dataObj[i].ppiId;
			_data.push(obj);
		}
		
	    // 指定图表的配置项和数据
	    var option = {
		    /* title : {
		        text: _title,//'项目建设任务分布图',
		        x:'center'
		    }, */
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    /* legend: {
		        orient: 'horizontal',
		        data: _projectIndexs
		    }, */
		    series : [
		        {
		            name: '项目建设任务',
		            type: 'pie',
		            radius : '50%',
		            center: ['50%', '50%'],
		            data:_data,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
	
	    // 使用刚指定的配置项和数据显示图表。
	    taskcount_myChart.setOption(option);
	    
	    // 点击事件
	    taskcount_myChart.on('click', function (params) {
	    	var _leaf = params.data.leaf;
	    	if (!_leaf) {
	    		//var _taskcount_myChart = echarts.init(document.getElementById('task_count_portal'));
		        /*** 初始化报表 */
	        	//_taskcount_myChart.showLoading();
	        	taskcount_myChart.clear();
	        	taskcount_myChart.showLoading();
	        	$.post('bireport/taskCountData.shtml', {projectIndexId : params.data.piId}, function(data){
	        		//_taskcount_myChart.hideLoading();
	        		taskcount_myChart.hideLoading();
	        		//initCharts(_taskcount_myChart, data);
	        		initCharts(taskcount_myChart, data);
	        		$('#btn_return_taskcount').show();
	        	});
	    	}
	    });
	}
</script>
  </body>
</html>
